<template>
    <div>
       <!--pages/case/case.wxml-->
       <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"  v-if="caseList.length" bottomPullText=" " bottomDropText=" " bottomLoadingText=" ">
            <ul class='case-wrap column'>
                <li class='case-item column' v-for="(item,index) in caseList" :key="index">
                    <div class='time border'>
                        <span class='label bold'>就诊时间： </span>
                        <span>{{item.createtime}}</span>
                    </div>
                    <div class='main column'>
                        <div class='main-item border flex'>
                            <span class='label bold'>辩证： </span>
                            <span>{{item.discrim}}</span>
                        </div>
                        <div class='main-item border flex'>
                            <span class='label bold'>处方： </span>
                            <div class='column recipe'>
                                <span class='bold'>{{item.text}}</span>
                                <span class='dosage'>共{{item.quantity}}剂，每日{{item.perday_qty}}剂，每剂分{{item.per_count}}次服用</span>
                            </div>
                        </div>
                        <div class='main-item border flex'>
                            <span class='label bold'>医嘱： </span>
                            <span>{{item.dose_remark}}</span>
                        </div>
                        <div class='main-item flex' v-if="item.dose_taboo">
                            <span class='label bold'>用药禁忌： </span>
                            <span>{{item.dose_taboo}}</span>
                        </div>
                    </div>
                    <div class='status'>
                        <img :src="item.effective == 1?inDate:overDate"></img>
                    </div>
                </li>
                <li class="page-loading flex" v-if="pageLoading">
                    <img src='../assets/load.gif'></img>
                    <span>加载中</span>
                </li>
            </ul>
        </mt-loadmore>
        <div class='no-data flex' v-else>
            <img src='../assets/no-data.png'></img>
            <p>暂无病例</p>
        </div>
        <!-- <button class='submit-btn flex'catchtap='payTap'>问诊</button> -->
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
    </div>
</template>
<script>
import inDate from '../assets/in-date.png'
import overDate from '../assets/over-date.png'
import { merecipebill } from "./../api/index";
import { Toast,Loadmore } from 'mint-ui';
export default {
    data(){
        return{
            name:'',//医生姓名
            doctorid:'',//医生id
            patientid:'',//患者id
            caseList:[],//病例列表
            showLoading:true,
            overDate,
            inDate,
            allLoaded:false,
            pageLoading:false
        }
    },
    mounted(){
        if(this.$route.params.patientid){
            this.patientid = this.$route.params.patientid
            sessionStorage.setItem('casePatientid',this.$route.params.patientid)
        }else{
            this.patientid = sessionStorage.getItem('casePatientid')
        }
        if(this.$route.params.doctorid){
            this.doctorid = this.$route.params.doctorid
            sessionStorage.setItem('caseDoctorid',this.$route.params.doctorid)
        }else{
            this.doctorid = sessionStorage.getItem('caseDoctorid')
        }
        this.getCaseList()
    },
    methods:{
        getCaseList(){
            let mstr = sessionStorage.getItem('mstr')
            merecipebill(mstr,this.patientid,this.doctorid).then((res)=>{
                if(res.data.status === 1)  {
                    this.caseList = this.caseList.concat(res.data.data)
                }else{
                    this.allLoaded = true
                    if(this.$refs.loadmore){
                        this.$refs.loadmore.onBottomLoaded();
                    }
                }
                this.showLoading = false
                this.pageLoading = false
            })
        },
        //加载更多
        loadBottom(){
            this.pageLoading = true
            this.getCaseList()
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/case/case.wxss */
.border {
    border-bottom: 1px solid #f2e3d0;
}

.bold {
    font-weight: bold;
}

.case-wrap .case-item {
    margin-bottom: torem(30px);
    background: #fff;
    position: relative;
}

.case-item .time {
    color: #666;
    font-size: torem(24px);
    align-items: center;
    padding: torem(16px) torem(30px);
}

.case-item .time .label {
    color: #333;
    font-size: torem(26px);
}

.case-item .main {
    padding-left: torem(30px);
}

.case-item .status img {
    width: torem(95px);
    height: torem(90px);
    position: absolute;
    right: torem(57px);
    top: torem(10px);
}

.main .main-item {
    color: #333;
    font-size: torem(28px);
    padding: torem(22px) torem(30px) torem(22px) 0;
}

.main-item .recipe {
    flex: 1;
    line-height: torem(42px);
}

.main-item  .recipe .dosage {
    font-size: torem(24px);
    color: #666;
    margin-top: torem(10px);
}

.submit-btn {
    width: torem(217px);
    height: torem(80px);
    background-color: #db5033;
    border-radius: torem(6px);
    align-items: center;
    justify-content: center;
    font-size: torem(30px);
    color: #fff;
    margin: torem(25px) auto;
}
.page-loading{
    font-size: torem(24px);
    align-items: center;
    justify-content: center;
    padding: torem(30px) 0;
    img{
        width: torem(32px);
        height: torem(32px);
        margin-right: torem(20px);
    }
}
</style>